import React, { useState } from "react";
import { ResultPage, Card, Tabs, Button } from "antd-mobile";
import { LoopOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
function Index() {
    let nav=useNavigate()
    let [start,setStart]=useState()
    let [end,setEnd]=useState()
   
  return (
    <div>
      <ResultPage title="购票系统" description="please token your pack">
        <ResultPage.Card style={{ height: 64, padding: 8 }}>
          <Tabs>
            <Tabs.Tab title="飞机票" key="fruits">
              <div className="kk">

                <span setStart={start}>北京</span>
                <span>
                  <LoopOutline fontSize={30} />
                </span>
                <span setEnd={end}>三亚</span>
              </div>
              <Button block color="primary" size="large" onClick={()=>nav(`/list?start=${start}&end=${end}`)}>
                搜索
              </Button>
            </Tabs.Tab>
            <Tabs.Tab title="火车票" key="vegetables">
              火车票
            </Tabs.Tab>
            <Tabs.Tab title="汽车票" key="animals">
              汽车票
            </Tabs.Tab>
          </Tabs>
        </ResultPage.Card>

        
      </ResultPage>
    </div>
  );
}

export default Index;
